import { Button, Form, Input, Modal,Select,message  } from 'antd';
import React, { Component } from 'react';

import { FormComponentProps } from 'antd/es/form';
import { TableListItem } from '../data.d';
import { queryUser, addUser ,updateUser, removeUser,queryClassgrade } from '../service';
import moment from "moment";
export interface FormValueType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}
const FormItem = Form.Item;

export interface UpdateFormState {
  formVals: FormValueType;
}

class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
  formRef = React.createRef();
  static defaultProps = {
    handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
    values: {},
  };

  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  constructor(props: UpdateFormProps) {
    super(props);
    this.state = {
      propsItem: {
        id:props.values.key,
        username: props.values.username,
        class_id: props.values.class_id,
        student_number: props.values.student_number,
        permissions: props.values.permissions + "",
      }
    };
  }
  componentWillMount = async () => {
    try {
      let classgrade = await queryClassgrade();
      let classgrade_option:any = [];
      classgrade.data.map((data)=>{
        classgrade_option.push(<Select.Option value={data.id} key={data.key}>{data.name}</Select.Option>);
      })
      this.setState({
        classgrade : classgrade_option
      })
    }
    finally {

    }
  }
  handleNext = () => {
    const { form, onSubmit: handleUpdate } = this.props;
    // const { formVals } = this.state;
    let {validateFields} =  this.formRef.current;
    validateFields().then(values=>{
      if (values.class_id == undefined || values.permissions == undefined || values.permissions == NaN) {
        message.error("请选择权限或班级");
        return;
      }
      values.permissions = +values.permissions;
      handleUpdate(values);
    })
  };



  renderFooter = () => {
    const { onCancel: handleUpdateModalVisible, values } = this.props;
    return [
      <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleNext()}>
        完成
      </Button>,
    ];
  };

  render() {
    const { updateModalVisible, onCancel: handleUpdateModalVisible, values } = this.props;
    const { Option } = Select;
    const {  formVals } = this.state;
    const { form } = this.props;
    function handleChange(value){
      console.log(`selected ${value}`);
    }

    function onChange(value) {
      console.log(`selected ${value}`);
    }
    function onBlur() {
      console.log('blur');
    }

    function onFocus() {
      console.log('focus');
    }

    function onSearch(val) {
      console.log('search:', val);
    }
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="用户修改"
        visible={updateModalVisible}
        footer={this.renderFooter()}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
      >
        <Form
          ref={this.formRef}
          initialValues={this.state.propsItem}>
        <FormItem key="id" {...this.formLayout} name="id">
          <Input placeholder="请输入" hidden/>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="姓名"
          name="username"
          rules={[
          {
            required: true,
            message: '请填写！',
          },
          ]}
        >
          <Input placeholder="请输入姓名" />
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="学号或工号"
          name="student_number"
        >
          <Input placeholder="请输入学号或工号" type='number'/>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="请选择教室"
          name="class_id"
        >
          <Select
            showSearch
            name="class_id"
            style={{width: 295}}
            placeholder="选择班级"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {this.state.classgrade}
          </Select>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="权限"
          name="permissions"
        >

            <Select onChange={handleChange} style={{width: 295}}>
              <Option value="1">超级管理员</Option>
              <Option value="2">管理员</Option>
              <Option value="3">老师</Option>
              <Option value="4">学生</Option>
            </Select>
        </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default UpdateForm;
